import React from 'react'
import styled from 'styled-components'
import TrailingIcon from '../../icons/material/check_circle-24px.svg'
import { MaterialIcon } from '../../icons/material/material-icon'
import { IconButton } from '../button'
import Card from '../card'
import CheckBox from '../check-box'
import { PasswordTextField } from '../password-text-field'
import { TextField } from '../text-field'

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px !important;
`

const StyledCard = styled(Card)`
  width: 100%;
  max-width: 640px;
`

const DenseIconButton = styled(IconButton)`
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
`

export default class TextFieldTest extends React.Component {
  state = {
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value6: '',
    value7: '',
    value8: '',
    value9: '',
    value10: '',
    value11: '',
    value12: '',
    value13: '',
    value14: '',
    value15: '',
    value16: '',
    value17: '',
    value18: '',
    changeError: null,
    dense: false,
  }

  render() {
    return (
      <Container>
        <StyledCard>
          <h3>Type some things</h3>
          <CheckBox checked={this.state.dense} label='浓度' onChange={this.onDenseChange} />
          <TextField
            name='1'
            value={this.state.value1}
            floatingLabel={true}
            dense={this.state.dense}
            label='标识'
            onChange={this.onChange}
          />
          <TextField
            name='2'
            value={this.state.value2}
            floatingLabel={true}
            dense={this.state.dense}
            label='不可用'
            disabled={true}
            onChange={this.onChange}
          />
          <TextField
            name='3'
            value={this.state.value3}
            floatingLabel={false}
            dense={this.state.dense}
            label='不可浮动'
            onChange={this.onChange}
          />
          <TextField
            name='4'
            value={this.state.value4}
            floatingLabel={true}
            dense={this.state.dense}
            label='变更时出错'
            errorText={this.state.changeError}
            onChange={this.onChange}
          />
          <TextField
            name='5'
            value={this.state.value5}
            floatingLabel={true}
            dense={this.state.dense}
            label='永久性的错误'
            errorText='hi'
            onChange={this.onChange}
          />
          <TextField
            name='6'
            value={'hi'}
            floatingLabel={true}
            dense={this.state.dense}
            label='数值导致不可用'
            disabled={true}
            onChange={this.onChange}
          />
          <TextField
            name='7'
            value={this.state.value7}
            floatingLabel={true}
            dense={this.state.dense}
            label='错误导致不可用'
            disabled={true}
            errorText={'hi'}
            onChange={this.onChange}
          />
          <TextField
            name='8'
            value={this.state.value8}
            floatingLabel={true}
            dense={this.state.dense}
            label='导引图标'
            leadingIcons={[<MaterialIcon icon='view_list' />]}
            onChange={this.onChange}
          />
          <TextField
            name='9'
            value={this.state.value9}
            floatingLabel={true}
            dense={this.state.dense}
            label='导引图标按钮'
            leadingIcons={
              this.state.dense
                ? [
                    <DenseIconButton
                      icon={<MaterialIcon icon='view_list' />}
                      title='导引操作 1'
                      onClick={this.onActionClick}
                    />,
                    <DenseIconButton
                      icon={<MaterialIcon icon='view_list' />}
                      title='导引操作 2'
                      onClick={this.onActionClick}
                    />,
                  ]
                : [
                    <IconButton
                      icon={<MaterialIcon icon='view_list' />}
                      title='导引操作 1'
                      onClick={this.onActionClick}
                    />,
                    <IconButton
                      icon={<MaterialIcon icon='view_list' />}
                      title='导引操作 2'
                      onClick={this.onActionClick}
                    />,
                  ]
            }
            onChange={this.onChange}
          />
          <TextField
            name='10'
            value={this.state.value10}
            floatingLabel={true}
            dense={this.state.dense}
            label='失利后的图标'
            trailingIcons={[<TrailingIcon />]}
            onChange={this.onChange}
          />
          <TextField
            name='11'
            value={this.state.value11}
            floatingLabel={true}
            dense={this.state.dense}
            label='失利后的图标按钮'
            trailingIcons={
              this.state.dense
                ? [
                    <DenseIconButton
                      icon={<TrailingIcon />}
                      title='失利后操作 1'
                      onClick={this.onActionClick}
                    />,
                    <DenseIconButton
                      icon={<TrailingIcon />}
                      title='失利后操作 2'
                      onClick={this.onActionClick}
                    />,
                  ]
                : [
                    <IconButton
                      icon={<TrailingIcon />}
                      title='失利后操作 1'
                      onClick={this.onActionClick}
                    />,
                    <IconButton
                      icon={<TrailingIcon />}
                      title='失利后操作 2'
                      onClick={this.onActionClick}
                    />,
                  ]
            }
            onChange={this.onChange}
          />
          <TextField
            name='12'
            value={this.state.value12}
            floatingLabel={true}
            dense={this.state.dense}
            label='没有错误'
            allowErrors={false}
            onChange={this.onChange}
          />
          <TextField
            name='13'
            value={this.state.value13}
            floatingLabel={false}
            dense={this.state.dense}
            label='没有错误，没有浮动'
            allowErrors={false}
            onChange={this.onChange}
          />
          <PasswordTextField
            name='14'
            value={this.state.value14}
            floatingLabel={true}
            dense={this.state.dense}
            label='密码文字区域'
            onChange={this.onChange}
          />
          <TextField
            name='15'
            value={this.state.value15}
            floatingLabel={true}
            dense={this.state.dense}
            label='多行'
            multiline={true}
            maxRows={4}
            onChange={this.onChange}
          />
          <TextField
            name='16'
            value={this.state.value16}
            floatingLabel={true}
            dense={this.state.dense}
            label='文字区域'
            multiline={true}
            rows={4}
            maxRows={4}
            onChange={this.onChange}
          />
          <TextField
            name='17'
            value={this.state.value17}
            floatingLabel={false}
            dense={this.state.dense}
            label='多行，没有浮动'
            multiline={true}
            maxRows={4}
            onChange={this.onChange}
          />
          <TextField
            name='18'
            value={this.state.value18}
            floatingLabel={false}
            dense={this.state.dense}
            label='文字区域, 没有浮动'
            multiline={true}
            rows={4}
            maxRows={4}
            onChange={this.onChange}
          />
        </StyledCard>
      </Container>
    )
  }

  onDenseChange = event => {
    this.setState({ dense: event.target.checked })
  }

  onChange = event => {
    const { value } = event.target
    const name = event.currentTarget.getAttribute('name')
    const valueKey = `value${name}`

    this.setState({
      [valueKey]: value,
      changeError: name === '4' && value ? 'Omg error' : null,
    })
  }

  onActionClick = () => {
    console.log('Action clicked')
  }
}
